<template>
    <div class="iconIndex">
        <div>
            <a-form layout="inline" style="margin-left: 10px;">
                <a-form-item label="图标名称">
                    <a-input v-model="iconName"/>
                </a-form-item>
                <a-form-item label="图标编码">
                    <a-input v-model="iconNum"/>
                </a-form-item>
                <a-form-item>
                    <a-button class="blue-btn" style="margin-right: 5px" @click="searchClick">
                        查询
                    </a-button>
                    <a-button @click="getData">
                        重置
                    </a-button>
                </a-form-item>
                <a-form-item style="text-align:right;">
                    <a-button class="blue-btn" @click="handleClick">
                        添加
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
        <div v-if="iconList.length" style="margin-top: 20px;overflow: scroll;height: calc(100vh - 271px);">
            <a-card hoverable style="width: 200px;display:inline-block;margin: 10px;" v-for="(item,index) in iconList" :key="index">
                <template slot="actions" class="ant-card-actions">
                    <a href="javascript:;" @click="editHandleClick(item)">编辑</a>
                    <a-popconfirm
                            title="您确定要删除这个图标吗?"
                            ok-text="确定"
                            cancel-text="取消"
                            @confirm="delClick(item.id)"
                            >
                            <a href="javascript:;">删除</a>
                    </a-popconfirm>
                </template>
                <i class="iconfont" :class="item.fcode"></i>
                <p>{{ item.fname }}</p>
                <p>{{ item.fcode }}</p>
            </a-card>
        </div>
        <div v-else style="margin-top: 20px;overflow: scroll;height: calc(100vh - 271px);">
          <a-empty />
        </div>
        <addAndEditModal ref="addAndEditModalRef" :dataObj=dataObj @getData=getData></addAndEditModal>
    </div>
</template>
<script>
import {queryIconList,queryPageIcon,deleteIcon,} from './service/index'
import addAndEditModal from './addAndEdit.vue'
export default {
    components:{
        addAndEditModal
    },
    data() {
        return {
            iconName: '',
            iconNum: '',
            iconList: [],
            dataObj: {}
        }
    },
    watch: {

    },
    mounted(){
        this.getData()
    },
    methods: {
        getData(){
          this.iconName = ''
          this.iconNum = ''
            queryIconList().then(res => {
                //console.log(res)
                // this.iconList = res.result.records
                this.iconList = res.result
            })
        },
        searchClick(){
          let data = {
            fname: this.iconName,
            fcode: this.iconNum
          }
          queryIconList(data).then(res => {
              //console.log(res)
              // this.iconList = res.result.records
              this.iconList = res.result
          })
        },
        handleClick(){
            this.dataObj = {
                title: '添加图标'
            }
            this.$nextTick(_ => {
                this.$refs.addAndEditModalRef.addAndEditVisible = true
            })
        },
        editHandleClick(item){
            this.dataObj = {
                title: '编辑图标信息',
                item: item
            }
            this.$nextTick(_ => {
                this.$refs.addAndEditModalRef.addAndEditVisible = true
            })
        },
        delClick(id){
            let idd = id.toString()
            deleteIcon({ids:idd}).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getData()
                } else {
                    this.$message.error(res.message)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.iconIndex {
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: #fff;
    /deep/ .ant-card-body {
       padding: 0px;
       text-align: center;
       i {
        font-size: 26px;
       }
    }
}

</style>
